<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body> 
      <div class="seo_div">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
          <el-col :span="24">
            <el-form-item label="自定义标题" prop="title">
                <el-input v-model="formData.title" type="textarea" :autosize="{minRows: 1, maxRows: 4}" clearable :style="{width: '100%'}">
                </el-input>
                如果不想用默认的文章标题，可以自定义title内容
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键词" prop="keywords">
                <el-input v-model="formData.keywords" type="textarea" :autosize="{minRows: 1, maxRows: 4}" clearable :style="{width: '100%'}">
                </el-input>
                多个关键词用英文逗号隔开，优先显示此处设置的关键词，未设置则使用标签
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input v-model="formData.description" type="textarea" :autosize="{minRows: 4, maxRows: 10}" :style="{width: '100%'}"></el-input>
                优先显示此处设置的描述，未设置则使用文章摘要，无摘要则截取手段内容
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="getCommon">获取通用设置</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div> 
    </el-dialog>
  </div>
</template>
  
  
  <script>
  import { getSeoDetail, saveSeoDetail, getSeo } from "@/api/content/seo";

  export default {
    /*props: {
      seodetail: {
        type: Object,
      }
    },*/
    data() {
      return {
        visible: false,
        title: 'SEO设置',
        loading: false,
        formData: {
          pageType: undefined,
          pageId: undefined,
          title: '',
          keywords: '',
          description: '',
        },
        // 表单校验
        rules: {
          title: [
            { required: true, message: "页面title不能为空", trigger: "blur" }
          ],
          keywords: [
            { required: true, message: "页面keywords不能为空", trigger: "blur" }
          ],
          description: [
            { required: true, message: "页面description不能为空", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      open(data) {
        this.getData(data);
        this.visible = true;
      },
      getData(param) {
        this.loading = true;
        getSeoDetail(param.pageType, param.pageId).then(response => {
            if (response.data === undefined) {
              this.$refs['elForm'].resetFields();
              this.formData.pageType = param.pageType;
              this.formData.pageId = param.pageId;
            } else {
              this.formData = response.data;
            }
            this.loading = false;
          }
        );
      },
      /** 表单操作 */
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if(valid) {
            // 提交表单
            this.formData.id = undefined;
            saveSeoDetail(this.formData).then(() => {
              this.$modal.msgSuccess('保存成功');
              this.visible = false;
            }).catch(() => {});
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields();
      },
      getCommon() {
        getSeo(this.formData.pageType).then(response => {
          let data = response.data;
          if (data === undefined) {
            this.formData.title = '';
            this.formData.keywords = '';
            this.formData.description = '';
          } else {
            this.formData.title = data.title;
            this.formData.keywords = data.keywords;
            this.formData.description = data.description;
          }
        }).catch(() => {});
      }
    }
  };
  </script>
  <style scoped lang="scss">
    .seo_div {
      height: 450px;
      overflow: auto;
    }
  </style>